<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <button>点击</button>
    </div>
    <script>
        /*
         * DOM:document Object Model(文档对象模型)
         * 1.获取元素节点的方式
         *    1.1 ES5之前：四种：省略
         *    1.2 ES6后：两种
         * */
        //var lis = document.getElementsByTagName("li");
        var lis = document.querySelectorAll("#ul>li");
        var btn = document.querySelector("button");
        btn.onclick = (function() {});
        setInterval(function() {
            for (var i = 0; i < lis.length; i++) {
                for (var j = 0; j < lis.length; j++) {
                    if (i == j) {
                        lis[j].style.background = "blue";
                    } else {
                        lis[j].style.background = "white";
                    }

                }
            }
        }, 200)
        doc
        //console.log(lis);
    </script>
</body>

</html>